<template>
  <div class="app-container">
    <el-card class="card">
      <el-row>
        <el-col :span="7" class="col">
          <div class="title">开拓城市</div>
          <div class="default">{{ titleObj.developCityNum || 0 }}个</div>
          <div class="footer">开发人员：{{ titleObj.developStaffNum || 0 }}人</div>
        </el-col>
        <el-col :span="1" class="col">
          <el-divider class="divider" direction="vertical" />
        </el-col>
        <el-col :span="8" class="col">
          <div class="title">展厅数量</div>
          <div class="default">{{ titleObj.showroomNum || 0 }}个</div>
          <div class="footer">关联商家：{{ titleObj.associationMerchantNum || 0 }}个</div>
        </el-col>
        <el-col :span="1" class="col">
          <el-divider class="divider" direction="vertical" />
        </el-col>
        <el-col :span="7" class="col">
          <div class="title">展厅返佣</div>
          <div class="default">¥{{ titleObj.rakeBack || 0 }}</div>
          <div class="footer">商家采购金额：¥{{ titleObj.merchantPurchaseAmount || 0 }}</div>
        </el-col>
      </el-row>
    </el-card>

    <el-tabs v-model="typeCode" class="demo-tabs" @tab-change="typeCodeChange">
      <el-tab-pane label="按展厅查看" name="1"></el-tab-pane>
      <el-tab-pane label="按城市查看" name="2"></el-tab-pane>
    </el-tabs>
    <el-form class="alone-business" :model="query" ref="queryBusinessRef" :inline="true" label-width="68px">
      <el-form-item label="城市筛选">
        <el-cascader
          v-model="query.areaId"
          :options="area"
          :props="{ label: 'name', value: 'id' }"
          placeholder="请选择公司区域"
          @change="areaChange"
          style="width: 240px"
        />
      </el-form-item>
      <template v-if="typeCode == 1">
        <el-form-item label="展厅状态">
          <el-select v-model="query.examState" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in state" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="展厅名称">
          <el-input v-model="query.showroomName" placeholder="请输入" clearable style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="所属租户">
          <el-input v-model="query.tenantName" placeholder="请输入" clearable style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="开发人员">
          <el-input v-model="query.devTenantName" placeholder="请输入" clearable style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="上样商品">
          <el-form-item prop="date1" style="margin: 0">
            <el-input v-model="query.productStartNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
          <span style="display: inline-block; width: 20px; text-align: center">-</span>
          <el-form-item prop="date2" style="margin: 0">
            <el-input v-model="query.productEndNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="上样比例">
          <el-form-item prop="date1" style="margin: 0">
            <el-input v-model="query.sampleProportionStartNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
          <span style="display: inline-block; width: 20px; text-align: center">-</span>
          <el-form-item prop="date2" style="margin: 0">
            <el-input v-model="query.sampleProportionEndNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <template v-if="typeCode == 1">
      <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
        <el-table-column property="showroomName" label="展厅名称" width="250" />
        <el-table-column property="state" label="状态">
          <template #default="scope">
            {{ stateFilter(scope.row.state, scope.row.examState) }}
          </template>
        </el-table-column>
        <el-table-column property="areaName" label="所在城市" />
        <el-table-column property="tenantName" label="所属租户" />
        <el-table-column property="pioneeringName" label="开发人员" />
        <el-table-column property="businessHoursInfo" label="营业时间" width="120" />
        <el-table-column property="proportion" label="展厅面积" />
        <el-table-column property="canShowProductNum" label="上样商品总数" width="120" />
        <el-table-column property="sampleProductProportion" label="上样商品比例" width="120" />
        <el-table-column property="rakeBack" label="展厅返佣获利" width="120" />
        <el-table-column property="associationMerchantNum" label="关联商家数" width="120" />
        <el-table-column property="merchantPurchaseAmount" label="商家累计采购金额" width="140" />
        <el-table-column property="merchantRakeBackAmount" label="商家累计返佣获利" width="140" />
        <template v-if="tableData[0]" v-for="item in tableData[0].categoryList" :key="item">
          <el-table-column :label="item.categoryName">
            <template #default="scope">
              {{ tableFilter(scope.row, item.categoryName) }}
            </template>
          </el-table-column>
        </template>
        <el-table-column property="createTime" label="创建时间" width="120" />
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-button link type="primary" @click="toPath('showRoomDetail', scope.row)"> 详情 </el-button>
            <el-button link type="primary" @click="toPath('sharedMerchant', scope.row)"> 共享商家 </el-button>
            <el-button v-if="scope.row.examState == 2" link type="primary" @click="openDialog(2, scope.row)"> 上线 </el-button>
            <template v-if="scope.row.examState == 3">
              <el-button v-if="scope.row.state == 1" link type="primary" @click="openDialog(4, scope.row)"> 禁用 </el-button>
              <el-button v-if="scope.row.state == 0" link type="primary" @click="openDialog(3, scope.row)"> 启用 </el-button>
            </template>
            <el-button v-if="scope.row.state != 2" link type="primary" @click="openDialog(5, scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="typeCode == 2">
      <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
        <el-table-column property="areaName" label="所在城市" />
        <el-table-column property="developStaffNum" label="开发人员数量" />
        <el-table-column property="showroomNum" label="开发展厅数量" width="120" />
        <el-table-column property="rakeBack" label="展厅返佣获利" width="120" />
        <el-table-column property="associationMerchantNum" label="展厅关联商家数" width="120" />
        <el-table-column property="merchantPurchaseAmount" label="商家累计采购金额" width="140" />
        <el-table-column property="merchantRakeBackAmount" label="商家累计返佣获利" width="140" />
      </el-table>
    </template>

    <pagination :total="listTotal" v-model:page="query.current" v-model:limit="query.size" @pagination="searchData" />

    <!-- 统一二次确认-弹窗 -->
    <el-dialog v-model="dialogValue" :close-on-click-modal="false" width="474" align-center title="" @close="closeDialog">
      <div style="text-align: center">
        <el-icon color="#F56C6C" size="70"><Warning /></el-icon>
      </div>
      <div style="text-align: center; margin-top: 40px; margin-bottom: 30px">
        {{ dialogText }}
      </div>
      <template #footer>
        <div style="text-align: center">
          <el-button class="btn" @click="closeDialog">取消</el-button>
          <el-button class="btn" :loading="dialogBtnLoading" type="primary" @click="dialogSure"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getArea } from "@/api/tenant";
import {
  getShowroomManage,
  showroomStatistics,
  exchangeState,
  getManageByCityPage
} from "@/api/system/rebateRules/showRoomManagement";
import { onActivated, onMounted } from "vue";
import { ElMessage } from "element-plus";

defineOptions({
  name: "ShowRoomManagement"
});

const typeCode = ref("1");
const area = ref([]);
const titleObj = ref({});
const selectRow = ref({});
const query = ref({
  factoryName: "",
  businessName: "",
  applicant: "",
  current: 1,
  size: 10
});
const tableLoading = ref(false);
const tableData = ref([]);
const listTotal = ref(0);
const state = ref([
  {
    value: "1",
    label: "待审核"
  },
  {
    value: "2",
    label: "待上线"
  },
  {
    value: "3",
    label: "已上线"
  },
  {
    value: "4",
    label: "已禁用"
  }
]);
const stateFilter = (value, examState) => {
  let arr = [
    {
      value: "1",
      label: "待审核"
    },
    {
      value: "2",
      label: "待上线"
    },
    {
      value: "3",
      label: "已上线"
    }
  ];
  let option = "";
  if (examState == 1 || examState == 2 || (examState == 3 && value == 1)) {
    option = arr.find(opt => opt.value == examState)?.label;
  } else if (value == 0) {
    option = "已禁用";
  } else if (value == 2) {
    option = "已删除";
  }
  return option ? option : "-"; // 如果没有找到，则返回默认
};
// 查询
const searchData = () => {
  pageListJudge();
};
const typeCodeChange = value => {
  typeCode.value = value;
  reset();
};
const tableFilter = (row, name) => {
  const category = row.categoryList.find(({ categoryName }) => categoryName === name);
  return category
    ? "可展示" +
        category.productNum +
        "," +
        "上样" +
        (category.sampleProductNum || 0) +
        "(" +
        (category.sampleProductProportion || 0) +
        "%" +
        ")"
    : undefined;
};
// 搜索重置
const reset = () => {
  query.value = {
    factoryName: "",
    businessName: "",
    applicant: "",
    current: 1,
    size: 10
  };
  pageListJudge();
};

const pageListJudge = async () => {
  tableLoading.value = true;
  let apiResult = typeCode.value == 1 ? getShowroomManage : getManageByCityPage;
  const { code, data } = await apiResult(query.value);
  if (code == 200) {
    tableData.value = data.records;
    listTotal.value = data.total;
    tableLoading.value = false;
  }
};
const router = useRouter();
const toPath = (path, row) => {
  router.push({
    path,
    query: row
  });
};
// 改变地址
const areaChange = value => {
  query.value.areaId = value[1];
};
// 弹窗
const dialogValue = ref(false);
const dialogBtnLoading = ref(false);
const dialogText = ref("");
// 打开确认弹窗
const openDialog = (type, row) => {
  selectRow.value = row;
  selectRow.value.selectTpye = type;
  switch (type) {
    case 1:
      dialogText.value = "请确认是否审核通过？";
      break;
    case 2:
      dialogText.value = "请确认是否发布上线？";
      break;
    case 3:
      dialogText.value = "请确认是否启用展厅";
      break;
    case 4:
      dialogText.value = "请确认是否禁用展厅";
      break;
    case 5:
      dialogText.value = "请确认是否删除展厅？";
      break;
    default:
      break;
  }
  dialogValue.value = true;
};
const getAreaList = () => {
  getArea().then(res => {
    res.data.forEach(item => {
      item?.children?.forEach(el => {
        el.children = [];
      });
    });
    area.value = res.data;
  });
};
// 关闭确认弹窗
const closeDialog = () => {
  dialogValue.value = false;
};
// 弹窗-确认
const dialogSure = async () => {
  closeDialog();
  let obj = {
    showroomId: selectRow.value.showroomId,
    status: selectRow.value.selectTpye
  };
  const { code } = await exchangeState(obj);
  if (code == 200) {
    ElMessage.success("操作成功");
    pageListJudge();
  }
};
const getshowroomStatistics = async () => {
  const { code, data } = await showroomStatistics();
  code == 200 && (titleObj.value = data);
};

onActivated(() => {
  pageListJudge();
});

onMounted(() => {
  getAreaList();
  getshowroomStatistics();
});
</script>
<style scoped lang="scss">
.card {
  padding: 22px;
}
.col {
  text-align: center;
}
.title {
  font-size: 18px;
  color: #4e5969;
}
.default {
  font-size: 32px;
  font-weight: bold;
  color: #3d3d3d;
  margin: 20px 0;
}
.footer {
  font-size: 14px;
  color: #86909c;
}
.divider {
  height: 40px;
  border-width: 4px;
  margin-top: 35px;
}

.demo-tabs {
  margin-top: 20px;
}
</style>
